<template>
  <div>
    <!-- 状态栏 -->
    <div style="background-color: #132144">
      <div class="flex justify-between">
        <div
          class="back"
          style="cursor: pointer"
          @click="
            () => {
              $router.go(-1)
            }
          "
        >
          <svg-icon icon-class="outlined-arrow-left" /> {{ operatorName }}
        </div>
        <div v-if="status === 1">
            <el-tooltip
              v-if="operator.levelName && operator.levelName.length > 32"
              class="item"
              effect="dark"
              :content="
                $t('system_menu.level_name') + ': ' + operator.levelName
              "
              placement="top"
            >
              <el-button
                class="level-btn"
                @click="levelVisible = 'true'"
              >
              <svg-icon icon-class="outlined-edit" /> 
                {{ level }}
              </el-button>
            </el-tooltip>
            <el-button
              v-if="!operator.levelName || operator.levelName.length <= 32"
              class="level-btn"
              @click="levelVisible = 'true'"
            >
            <svg-icon icon-class="outlined-edit" /> 

              {{ levelHide }}
            </el-button>
        </div>
      </div>
      <el-tabs v-model="activeTab" class="dark-tab" @tab-click="tabClickHandle">
        <el-tab-pane :label="$t('operator.account')" name="account" />
      </el-tabs>
    </div>
    <div style="position: relative; top: -90px">
      
      <div v-if="activeTab === 'account'">
        <account ref="accountTab" @update-name=updateName($event) />
      </div>
    </div>
    <level
      v-model="levelVisible"
      :title="$t('operator.level')"
      :operator="operator"
      @refresh="getOperatorInfo"
    />
  </div>
</template>

<script>
import { formatDate } from '@/utils/formatDate'
import { getOperatorInfo } from '@/api/operator'
import Level from './components/operator/level.vue'
import Account from './components/operator/account.vue'

export default {
  name: 'OperatorDetail',
  components: {
    Level,
    Account,
  },
  data() {
    return {
      levelVisible: false,
      level: '',
      levelHide: '',
      operatorName: '',
      activeTab: '',
      operatorId: this.$route.params.operatorId,
      operator: null,
      status: 2
    }
  },
  created() {
    this.getOperatorInfo()
  },
  methods: {
    updateName($event) {
      this.operatorName = $event
    },
    getOperatorInfo() {
      getOperatorInfo(this.operatorId)
        .then((res) => {
          this.operator = res
          this.operatorName = res.name
          this.status = res.status
          if (this.status === 1) {
            this.activeTab = 'account'
            this.$nextTick(() => {
              this.$refs.accountTab.init(this.operator)
            })
            this.expirationHandler()
          } else {
            this.activeTab = 'account'
            this.$nextTick(() => {
              this.$refs.accountTab.init(this.operator)
            })
          }
        })
        .catch(this.$confirmError)
    },
    tabClickHandle(tab, event) {
      // if (tab.name === 'overview') {
      //   this.$nextTick(() => {
      //     this.$refs.overviewTab.init(this.operator)
      //   })
      // }
      if (tab.name === 'account') {
        this.$nextTick(() => {
          this.$refs.accountTab.init(this.operator)
        })
      }
    },
    formatDate(cellValue, fmt) {
      cellValue = new Date(cellValue).valueOf()
      return formatDate(cellValue, fmt)
    },
    expirationHandler() {
      // eslint-disable-next-line no-unused-vars
      if (this.operator) {
        if (this.operator.levelCode) {
          let levelName = this.operator.levelName
          if (levelName && levelName.length > 32) {
            levelName = levelName.slice(0, 31) + '...'
          }
          // if (this.operator.levelCode === 'STANDARD_LEVEL') {
          //   levelName = this.$t('operator.level_list[0].label')
          // } else if (this.operator.levelCode === 'ENTERPRISE_LEVEL') {
          //   levelName = this.$t('operator.level_list[1].label')
          // }
          if (
            !this.operator.expireTime ||
            this.operator.expireTime === undefined
          ) {
            this.level =
              levelName + ' | ' + this.$t('operator.leverExpireForever')
            this.levelHide =
              this.operator.levelName +
              ' | ' +
              this.$t('operator.leverExpireForever')
          } else {
            var date = formatDate(this.operator.expireTime, 'yyyy-MM-dd')
            this.level = levelName + ' | ' + date
            this.levelHide = this.operator.levelName + ' | ' + date
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.back {
  color: #ffffff;
  font-size: 20px;
  margin: 20px;
}
.level-btn {
  background: #2a3757;
  color: #ffffff;
  border: none;
  margin: 20px;
}

.dark-tab {
  margin: 0 20px;
  padding-bottom: 100px;
  ::v-deep .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #677796;
    z-index: 1;
  }
  ::v-deep .el-tabs__item {
    color: #677796;
    line-height: 21px;

    &:hover {
      color: #ffffff;
    }

    &.is-active {
      color: #ffffff;
    }
  }

  ::v-deep .el-tabs__item.is-top:nth-child(2) {
    padding-left: 20px;
  }
}
</style>
